<template>
  <div>
    <el-button type="primary" @click="show_copy_box = true"
      >复制到企业</el-button
    >
  </div>
  <div
    class="container flex"
    style="height: calc(100% - 50px); margin-top: 10px"
  >
    <div class="left">
      <el-menu
        class="el-menu-vertical-demo"
        size="small"
        style="background-color: #fff"
        unique-opened
        :default-active="default_menu"
        @select="
          (e) => {
            get_mould_tabs_list(e)
          }
        "
      >
        <el-sub-menu v-for="item in menu_list" :key="item.id" :index="item.id">
          <template #title>
            <span style="color: #333">{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="(item1, index1) in item.children"
            :key="index1"
            :index="item1.id"
            >{{ item1.name }}</el-menu-item
          >
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="right flex1">
      <div>
        <div class="flex_cm" style="height: 98%">
          <div class="flex border_bottom">
            <div
              class="tab_item"
              v-for="(item, index) in mould_tabs"
              :key="item.id"
              @click="tabs_value = index"
            >
              <span
                v-show="item.is_checked"
                :style="{ color: tabs_value == index ? '#3580eb' : '' }"
                >{{ item.name }}</span
              >
            </div>
          </div>
          <div
            v-for="(item, index) in mould_tabs"
            :key="item.id"
            style="overflow-y: auto; width: 100%"
          >
            <div v-show="tabs_value == index" style="width: 100%">
              <el-form label-width="160px" style="margin-top: 10px">
                <div class="form_box" v-show="tabs_value == 0">
                  <el-form-item label="类型编码">
                    <el-input disabled v-model="default_code"></el-input>
                  </el-form-item>
                  <el-form-item label="状态">
                    <el-input disabled v-model="status"></el-input>
                  </el-form-item>
                </div>
                <div class="form_box">
                  <div
                    v-for="(item2, index2) in item.templateFormMetadataDealList"
                    :key="item2.id"
                  >
                    <el-form-item v-show="item2.is_checked" :label="item2.name">
                      <el-input
                        v-show="item2.type == 1 || item2.type == 2"
                        :type="
                          item2.type == 1
                            ? 'text'
                            : item2.type == 2
                            ? 'number'
                            : ''
                        "
                        v-model="item2['value_' + item.id + default_menu]"
                      ></el-input>
                      <el-select
                        v-model="item2['value_' + item.id + default_menu]"
                        v-show="item2.type == 3 || item2.type == 4"
                      >
                        <el-option
                          v-for="item3 in item2.metadataValueList"
                          :label="item3.name"
                          :value="item3.name"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-form>
              <div
                class="m_top10"
                v-for="(item1, index1) in item.children"
                :key="item1.id"
              >
                <div v-show="item1.is_checked">
                  <div>{{ item1.name }}</div>
                  <el-table
                    style="margin: 10px 0; width: 100%"
                    :data="item1.formSubCollectionDealList"
                    max-height="300px"
                  >
                    <el-table-column
                      label="序号"
                      type="index"
                      width="60px"
                      fixed
                    ></el-table-column>
                    <el-table-column
                      v-for="item3 in item1.templateFormMetadataDealList
                        .formSubCollectionValueDealList"
                      :label="item3.name"
                    >
                      <template #default="scope: any">
                        <!-- 匹配列表列 是否变化  并显示未改变列 和 值 -->
                        <div
                          v-for="item4 in scope.row
                            .formSubCollectionValueDealList"
                          :key="item4.id"
                        >
                          <span
                            v-show="
                              item4.id == item3.id ||
                              item4.metadataId == item3.id
                            "
                            >{{ item4.value }}</span
                          >
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="状态" fixed="right" width="100">
                      <template #default="scope: any">
                        <div v-show="!scope.row.isEnable">已禁用</div>
                        <div
                          v-show="scope.row?.isEnable"
                          style="color: #3580eb"
                        >
                          已启用
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      fixed="right"
                      :width="tabs_value == 0 ? '160' : '100'"
                    >
                      <template #default="scope: any">
                        <el-dropdown>
                          <el-button> 更多 </el-button>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item
                                @click="
                                  update_list({
                                    item_current: scope.row, // 列值
                                    row_index: scope.$index, // 第几列
                                    index1: index1, // 第几个列表
                                    index: index, // 第几个tab栏
                                    item: item1.templateFormMetadataDealList, // 列表参数
                                    type: 1,
                                  })
                                "
                                >编辑</el-dropdown-item
                              >
                              <el-dropdown-item
                                v-show="!scope.row.isEnable"
                                @click="
                                  update_list({
                                    item: scope.row,
                                    row_index: scope.$index,
                                    index1: index1,
                                    type: 2,
                                  })
                                "
                                >启用</el-dropdown-item
                              >
                              <el-dropdown-item
                                v-show="scope.row?.isEnable"
                                @click="
                                  update_list({
                                    item: scope.row,
                                    row_index: scope.$index,
                                    index1: index1,
                                    type: 2,
                                  })
                                "
                                >禁用</el-dropdown-item
                              >
                              <el-dropdown-item
                                @click="
                                  update_list({
                                    item: scope.row,
                                    row_index: scope.$index,
                                    index1: index1,
                                    type: 3,
                                  })
                                "
                                >删除</el-dropdown-item
                              >
                              <el-dropdown-item
                                @click="
                                  update_list({
                                    item: scope.row,
                                    row_index: scope.$index,
                                    index1: index1,
                                    type: 4,
                                  })
                                "
                                >置顶</el-dropdown-item
                              >
                              <el-dropdown-item
                                @click="
                                  update_list({
                                    item: scope.row,
                                    row_index: scope.$index,
                                    index1: index1,
                                    type: 5,
                                  })
                                "
                                >上移</el-dropdown-item
                              >
                              <el-dropdown-item
                                @click="
                                  update_list({
                                    item: scope.row,
                                    row_index: scope.$index,
                                    index1: index1,
                                    type: 6,
                                  })
                                "
                                >下移</el-dropdown-item
                              >
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                        <el-button
                          type="primary"
                          class="m_left10"
                          v-show="tabs_value == 0"
                          @click="preview_to_3d(scope.row)"
                        >
                          预览
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button
                    type="primary"
                    size="small"
                    @click="
                      add_table_data({
                        index: index,
                        index1: index1,
                        item: item1.templateFormMetadataDealList,
                      })
                    "
                    >添加{{ item1.name }}</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="mould_tabs.length != 0">
        <div>
          <el-button
            type="primary"
            @click="submit"
            :loading="save_loading"
            v-show="role_list[0].has_role"
            >保存</el-button
          >
          <el-button type="primary" @click="reset" :loading="save_loading"
            >复位</el-button
          >
        </div>
        <div>
          <preview
            style="width: 100%; height: calc(100% - 40px); overflow: hidden"
          ></preview>
        </div>
      </div>
    </div>
  </div>
  <el-drawer
    v-model="show_add_box"
    direction="rtl"
    size="30%"
    :close-on-click-modal="false"
  >
    <template #title
      ><h4>{{ show_add_box_zh }}</h4></template
    >
    <template #default>
      <el-form label-width="150px">
        <el-form-item
          :label="item.name"
          v-for="item in add_form_list.formSubCollectionValueDealList"
          :key="item.id"
        >
          <el-input
            placeholder="请输入"
            v-model="item.value"
            v-show="item.type == 1 || item.type == 2"
            show-word-limit
            maxlength="100"
          ></el-input>
          <div v-show="item.type == 4 || item.type == 3" class="flex">
            <el-select v-model="item.value">
              <el-option
                v-for="item1 in item.metadataValueList"
                :label="item1.name"
                :value="item1.name"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
      </el-form>
      <div class="tr m_top10">
        <el-button @click="show_add_box = false">取消</el-button>
        <el-button type="primary" @click="add_submit">确定</el-button>
      </div>
    </template>
  </el-drawer>
  <el-drawer
    v-model="show_copy_box"
    direction="rtl"
    size="30%"
    :close-on-click-modal="false"
    @close=";(show_copy_box = false), (enterpriseId = '')"
  >
    <template #title>
      <h4>复制到企业</h4>
    </template>
    <template #default>
      <el-select
        v-model="enterpriseId"
        filterable
        style="width: 100%"
        remote
        reserve-keyword
        placeholder="请输入"
        :remote-method="remoteMethod"
        @change="
          enterprise_list.forEach((item) => {
            item.disabled = false
          })
        "
      >
        <div v-for="item in enterprise_list" :key="item.id">
          <el-option
            v-if="!item.disabled"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </div>
      </el-select>
      <div class="tr m_top10">
        <el-button @click=";(enterpriseId = ''), (show_copy_box = false)"
          >取消</el-button
        ><el-button type="primary" @click="copy_submit">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts">
export default {
  name: 'mould_list',
}
</script>
<script lang="ts" setup>
import { check_role } from '@/utils/utils' // 权限校验
import preview from './preview_3d.vue'
import { onMounted, ref, nextTick, computed } from 'vue'
import { FormInstance, ElMessage, ElMessageBox } from 'element-plus'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import { useStore } from 'vuex'
import AModelFmulaUtils from '@/model/utils/AModelFmulaUtils'
import MD from '@/model/MD'
import SceneMgr from '@/model/manager/SceneMgr'
import { MgrDef } from '@/model/const/ModelConst'
const store = useStore()
const role_list = ref([{ path: 'mould_list/post', has_role: false }])
nextTick(() => {
  role_list.value.forEach((item) => {
    item.has_role = check_role(item.path)
  })
})
const menu_list = ref()
const default_menu = ref('') // 菜单默认
const default_code = ref() // 类型编码
const tabs_value = ref(0)
const page_data = ref({
  current: 1,
  pageSize: 10000,
  isEnable: true,
  type: '1',
})
const save_loading = ref(false)
const status = ref('启用')
onMounted(() => {
  get_metadata()
})
const show_copy_box = ref(false)
const enterpriseId = ref('')
const enterprise_list = computed(() => {
  return store.state.enterprise_list.filter((item) => {
    return item.enterpriseLevelList.some((item1) => {
      return item1.productId == 2 && (item1.levelId == 3 || item1.levelId == 4)
    })
  })
})
const remoteMethod = (e) => {
  enterprise_list.value.forEach((item) => {
    if (!item.name.includes(e)) {
      item.disabled = true
    } else {
      item.disabled = false
    }
  })
}
const copy_submit = () => {
  if (enterpriseId.value == '') {
    ElMessage.error('请选择企业')
    return
  }
  ElMessageBox.confirm(
    '复制后该企业原有模板库将被覆盖，确定将模板库复制到该企业吗？',
    '提示',
    {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      closeOnClickModal: false,
      type: 'warning',
    }
  )
    .then(() => {
      axios
        .request({
          url: serviceApi.mould_template_copy,
          method: 'post',
          params: { enterpriseId: enterpriseId.value },
        })
        .then(() => {
          ElMessage.success('操作成功！')
          enterpriseId.value = ''
          show_copy_box.value = false
        })
        .catch((err) => {
          ElMessage.error(err)
        })
    })
    .catch(() => {})
}
// 复位
const reset = () => {
  MD.SC.resetCameraPosition()
}
const preview_to_3d = (e) => {
  // 常用尺寸列表的 参数列
  console.log(e)
  let itemObj = {
    formDTOList: preview_to_3d_list.value,
    code: default_code.value,
  }
  let itemObj2 = {}
  //   let list =
  //     mould_tabs.value[0]?.children[0]?.templateFormMetadataDealList
  //       .formSubCollectionValueDealList
  e.formSubCollectionValueDealList.forEach((item) => {
    itemObj2[item.metadataCode] = item.value
    // item.value = e.formSubCollectionValueDealList[index].value
  })
  // itemObj = Object.assign(itemObj,itemObj2);

  console.log(e, itemObj, itemObj2)
  let aludata = AModelFmulaUtils.getAluObject(itemObj, itemObj2)

  // 预览铝模板
  MD.SC.updateALByType(default_code.value, aludata)
}
const submit = () => {
  console.log(mould_tabs.value)
  if (save_loading.value) return
  save_loading.value = true
  var data = []
  for (let i in mould_tabs.value) {
    if (mould_tabs.value[i].is_checked) {
      var a = {
        // tab栏列表
        formId: mould_tabs.value[i].id,
        formValueDealList: [], // tab栏下参数
        formSubDealList: [], // tab栏下表格
      }
      for (let ii in mould_tabs.value[i].templateFormMetadataDealList) {
        var a_1 = {
          metadataId: mould_tabs.value[i].templateFormMetadataDealList[ii].id,
          value:
            mould_tabs.value[i].templateFormMetadataDealList[ii][
              'value_' + mould_tabs.value[i].id + default_menu.value
            ],
        }
        a.formValueDealList.push(a_1) // tab栏下参数
      }
      for (let ii in mould_tabs.value[i].children) {
        if (mould_tabs.value[i].children[ii].is_checked) {
          var b = {
            formId: mould_tabs.value[i].children[ii].id,
            formSubCollectionDealList: [],
          }
          mould_tabs.value[i].children[ii].formSubCollectionDealList.forEach(
            (item) => {
              var c = {
                formSubCollectionValueDealList: [],
                isEnable: item.isEnable,
              }
              console.log(item)
              if (item.formSubCollectionValueDealList) {
                item.formSubCollectionValueDealList.forEach((item1) => {
                  console.log(item1, item1.value)
                  if (item1.is_checked) {
                    var c_1 = {
                      // 列表参数
                      metadataId: item1.id ? item1.id : item1.metadataId,
                      value: item1.value,
                    }
                    c.formSubCollectionValueDealList.push(c_1)
                  }
                })
              }
              b.formSubCollectionDealList.push(c)
            }
          )
          a.formSubDealList.push(b)
        }
      }
      data.push(a)
    }
  }
  console.log(data)
  axios
    .request({
      url: serviceApi.mould_template_saveData + '/' + default_menu.value,
      method: 'put',
      data: { formDealList: data },
    })
    .then((res) => {
      console.log(res)
      ElMessage.success('保存成功！')
      save_loading.value = false
    })
    .catch((error) => {
      save_loading.value = false
      ElMessage.error(error)
    })
}

const row_index = ref() // 修改 table 的 index
const update_type = ref(0) // 修改 table 的 类型
const update_list = (e) => {
  console.log(e)
  update_type.value = e.type
  row_index.value = e.row_index
  add_form_index.value = e.index1
  var list =
    mould_tabs.value[tabs_value.value].children[add_form_index.value]
      .formSubCollectionDealList
  if (e.type == 1) {
    e.item.formSubCollectionValueDealList.forEach((item1) => {
      e.item_current.formSubCollectionValueDealList.forEach((item2) => {
        if (item2.metadataId == item1.id || item2.id == item1.id) {
          item1.value = item2.value
        }
      })
    })
    // 编辑
    add_form_list.value = e.item
    show_add_box_zh.value = '编辑'
    show_add_box.value = true
    console.log(add_form_list.value)
  } else if (e.type == 2) {
    // 禁/启用
    list[e.row_index].isEnable = !list[e.row_index].isEnable
  } else if (e.type == 3) {
    // 删除
    list.splice(e.row_index, 1)
  } else if (e.type == 4) {
    // 置顶
    list.unshift(list.splice(e.row_index, 1)[0])
  } else if (e.type == 5) {
    // 上移
    if (e.row_index != 0) {
      list[e.row_index] = list.splice(e.row_index - 1, 1, list[e.row_index])[0]
    } else {
      ElMessage.warning('已经置顶了')
    }
  } else if (e.type == 6) {
    // 下移
    if (e.row_index != list.length - 1) {
      list[e.row_index] = list.splice(e.row_index + 1, 1, list[e.row_index])[0]
    } else {
      ElMessage.warning('已经最底部了')
    }
  }
  console.log(list)
}
const add_submit = () => {
  var item = JSON.parse(JSON.stringify(add_form_list.value))
  console.log(item, update_type.value)
  if (update_type.value == 0) {
    mould_tabs.value[tabs_value.value].children[
      add_form_index.value
    ].formSubCollectionDealList.push(item)
  } else {
    mould_tabs.value[tabs_value.value].children[
      add_form_index.value
    ].formSubCollectionDealList[row_index.value] = item
    update_type.value = 0
  }
  show_add_box.value = false
  console.log(mould_tabs.value[tabs_value.value])
}
const show_add_box = ref(false) // 列表添加弹窗
const add_form_list = ref() // 增加列表的数据
const add_form_index = ref() // 增加 第几个列表 数据
const show_add_box_zh = ref()
// 添加列表数据
const add_table_data = (e) => {
  console.log(e)
  e.item.formSubCollectionValueDealList.forEach((element) => {
    element.value = ''
  })
  update_type.value = 0
  add_form_index.value = e.index1
  add_form_list.value = JSON.parse(JSON.stringify(e.item))
  show_add_box_zh.value = '新增'
  show_add_box.value = true
}
const get_template_setData = (e) => {
  // 获取模板下的配置参数
  console.log(e)
  mould_tabs.value.forEach((element) => {
    element.is_checked = false
    element.templateFormMetadataDealList = [] // tab栏下参数
    element.children.forEach((item) => {
      item.is_checked = false
      item.templateFormMetadataDealList = [] // tab栏下列表参数   列值
    })
  })
  metadata.value.forEach((element) => {
    element.is_checked = false
  })
  axios
    .request({
      url: serviceApi.mould_template_getData + '/' + e,
      method: 'get',
    })
    .then((res) => {
      console.log(res)
      default_code.value = res.data.code
      default_menu.value = res.data.id
      var list = res.data.formDealList ? res.data.formDealList : []
      var a = mould_tabs.value // 顶部栏原数据
      var b = metadata.value // 元数据  （参数）原数据
      for (let i in list) {
        var p_obj = [] // 选中tab中头部的参数
        for (let ii in list[i].metadataDealList) {
          for (let k in b) {
            if (b[k].id == list[i].metadataDealList[ii].metadataId) {
              b[k].is_checked = true
              var obj_item = 'value_' + list[i].id + default_menu.value
              b[k][obj_item] = ''
              b[k].value = ''
              p_obj.push(b[k])
              continue
            }
          }
        }
        // console.log(p_obj)
        for (let j in a) {
          if (a[j].id == list[i].formId) {
            // 如果该formId 为tab栏
            a[j].is_checked = true
            a[j].templateFormMetadataDealList = p_obj
            continue // 如果该formId 为tab栏 到此停止本次循环
          }
        }
        for (let l in a) {
          for (let ll in a[l].children) {
            if (a[l].children[ll].id == list[i].formId) {
              // 如果该formId 为tab下的列表
              var item = {
                isEnable: true,
                formSubCollectionValueDealList: p_obj,
              }
              a[l].children[ll].is_checked = true
              a[l].children[ll].formSubCollectionDealList = []
              a[l].children[ll].templateFormMetadataDealList = JSON.parse(
                JSON.stringify(item)
              )
            }
          }
        }
      }
      console.log(a)
      var a_1 = []
      a.forEach((element) => {
        if (element.is_checked) {
          a_1.push(element)
        }
      })
      mould_tabs.value = a_1
      metadata.value = b
      get_info_data(e)
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}
const preview_to_3d_list = ref()
const get_info_data = (e) => {
  // 回填模板下参数的值
  axios
    .request({
      url: serviceApi.mould_template_getInfo + '/' + e,
      method: 'get',
    })
    .then((res) => {
      console.log(res)
      if (res.data === null) return
      preview_to_3d_list.value =
        res.data.formDTOList == null
          ? []
          : JSON.parse(JSON.stringify(res.data.formDTOList))
      var list = res.data == null ? [] : res.data.formDTOList
      var a = mould_tabs.value // 顶部栏原数据
      console.log(metadata.value)
      for (let i in list) {
        var obj_item = 'value_' + list[i].formId + default_menu.value // 表单绑定唯一值
        for (let j in a) {
          if (a[j].id == list[i].formId) {
            // 如果该formId 为tab栏
            for (let jj in a[j].templateFormMetadataDealList) {
              for (let ii in list[i].formValueList) {
                if (
                  a[j].templateFormMetadataDealList[jj].id ==
                  list[i].formValueList[ii].metadataId
                ) {
                  a[j].templateFormMetadataDealList[jj][obj_item] =
                    list[i].formValueList[ii].value
                }
              }
            }
            continue // 如果该formId 为tab栏 到此停止本次循环
          }
        }
        for (let l in a) {
          for (let ll in a[l].children) {
            if (list[i].formSubDTOList) {
              for (let ii in list[i].formSubDTOList) {
                if (a[l].children[ll].id == list[i].formSubDTOList[ii].formId) {
                  if (list[i].formSubDTOList[ii].formSubCollectionList) {
                    list[i].formSubDTOList[ii].formSubCollectionList.forEach(
                      (item) => {
                        if (item.formSubCollectionValueList) {
                          // 给之前保存 且拥有该元数据的参数加上 is_checked
                          item.formSubCollectionValueList.forEach((item2) => {
                            if (
                              a[l].children[ll].templateFormMetadataDealList
                                .formSubCollectionValueDealList
                            ) {
                              var flag = a[l].children[
                                ll
                              ].templateFormMetadataDealList.formSubCollectionValueDealList.some(
                                (item3) => {
                                  return item2.metadataId == item3.id
                                }
                              )
                              if (flag) {
                                item2.is_checked = true
                              }
                            }
                          })
                        }
                        item.formSubCollectionValueDealList =
                          item.formSubCollectionValueList
                      }
                    )
                    // 如果该formId 为tab下的列表
                    a[l].children[ll].formSubCollectionDealList =
                      list[i].formSubDTOList[ii].formSubCollectionList
                  }
                }
              }
            }
          }
        }
      }
      console.log(a)
      mould_tabs.value = a
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}
const get_menu_list = () => {
  axios
    .request({
      url: serviceApi.mould_list,
      method: 'post',
      data: page_data.value,
    })
    .then((res) => {
      console.log(res)
      // 排序 过滤停用 转二级树
      if (res.data.content.length != 0) {
        res.data.content.sort(function (a, b) {
          return a.sort - b.sort
        })
        menu_list.value = arrToTree(
          res.data.content.filter((item) => {
            return item.isEnable
          })
        )
        console.log(menu_list.value)
        default_menu.value = menu_list.value[0].children[0].id
        get_mould_tabs_list('')
      }
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}
const mould_tabs = ref([])
const get_mould_tabs_list = (e) => {
  tabs_value.value = 0
  axios
    .request({
      url: serviceApi.mould_tabs_list,
      method: 'post',
      data: { current: 1, pageSize: 100 },
    })
    .then((res) => {
      console.log(res)
      res.data.content.forEach((element) => {
        element.parentId === null ? '-1' : ''
        element.is_checked = false
      })
      // 转 二级树
      mould_tabs.value = arrToTree(res.data.content.reverse())
      ;(MD.mgr[MgrDef.SCENE_MGR] as SceneMgr).clearALLMesh()
      console.log(default_menu.value)
      if (default_menu.value && default_menu.value != '') {
        get_template_setData(e == '' ? default_menu.value : e)
      }
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}
const metadata = ref()
const get_metadata = () => {
  axios
    .request({
      url: serviceApi.metadata_list,
      method: 'post',
      data: { current: 1, pageSize: 1000, isTem: true },
    })
    .then((res) => {
      console.log(res)
      metadata.value = res.data.content
      get_menu_list()
    })
    .catch((error) => {
      ElMessage.error(error)
    })
}

const arrToTree = (res_list) => {
  var list_1 = []
  for (let i in res_list) {
    res_list[i].parentId == null
      ? (res_list[i].parentId = '-1')
      : res_list[i].parentId
    if (res_list[i].parentId == -1) {
      res_list[i].children = []
      list_1.push(res_list[i])
    }
  }
  for (let i in res_list) {
    for (let ii in list_1) {
      if (list_1[ii].id == res_list[i].parentId) {
        list_1[ii].children.push(res_list[i])
      }
    }
  }
  return list_1
}
</script>

<style lang="scss" scoped>
:deep(.el-menu) {
  .el-sub-menu__title {
    background-color: #fff;
    &:hover {
      background-color: #fff;
    }
  }
  --el-menu-text-color: #333;
  --el-menu-hover-text-color: #333;
  --el-menu-bg-color: #fff;
  --el-menu-hover-bg-color: #fff;
}
.tab_item span {
  display: inline-block;
  width: 100px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border: 1px solid #e6e8eb;
  border-bottom: none;
  cursor: pointer;
}
.form_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  :deep(.el-input__inner) {
    padding-right: 11px;
  }
  > div {
    width: 50%;
    > .el-form-item {
      padding: 5px 0;
    }
  }
  > .el-form-item {
    width: 50%;
    padding: 5px 0;
  }
}
:deep(.el-tabs__item) {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
}
:deep(.el-tabs__content) {
  height: 0;
  padding: 5px;
}
.right {
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  height: 100%;
  width: calc(100% - 210px);
  flex-shrink: 0;
  > div {
    width: calc(50%);
    > div {
      padding: 10px;
    }
  }
  > div:last-child {
    border-left: 1px solid #e6e8eb;
    display: flex;
    flex-direction: column;
    > div:last-child {
      flex: 1;
      border-top: 1px solid #e6e8eb;
      width: 710px;
      height: 754px;
      flex-shrink: 0;
    }
  }
}
.left {
  width: 200px;
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
